<template>
  <div id="myOrder">
    <div class="searchForm">
      <el-form :inline="true"
               :model="formData"
               class="demo-form-inline">
        <el-form-item label="服务类型">
          <el-select v-model="formData.or_kind"
                     style="width: 100px"
                     placeholder="请选择">
            <el-option label="所有" value=""></el-option>
            <el-option v-for="item in serviceKind"
                       :label="item.name"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单状态">
          <el-select v-model="formData.or_type"
                     style="width: 100px"
                     placeholder="请选择">
            <el-option label="所有" value=""></el-option>
            <el-option v-for="item in orderType"
                       :label="item.name"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="受理状态">
          <el-select v-model="formData.or_accept"
                     style="width: 100px"
                     placeholder="请选择">
            <el-option label="所有" value=""></el-option>
            <el-option v-for="item in acceptStatus"
                       :label="item.name"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-input v-model="formData.or_product" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-menu :default-active="$route.path"
             class="el-menu-demo"
             mode="horizontal">
      <el-menu-item v-for="(item,index) in tab"
                    :index="item.path"
                    @click="handleSelect(item.path,item.name)"
                    :key="index">{{item.title}}
      </el-menu-item>
    </el-menu>
    <div class="line"></div>
    <router-view  ref="all"/>
  </div>
</template>

<script>
  import {dictionary} from "../../../utils/allDictionary";
  import axios from "axios";

  export default {
    name: "MyOrder",
    data(){
      return{
        tab:[
          {title:'全部',path:'/buyer/myOrder/all',name:'BuyAll'},
          {title:'待付款',path:'/buyer/myOrder/notPay',name:'BuyNotPay'},
          {title:'已付款',path:'/buyer/myOrder/payed',name:'BuyPayed'}
        ],
        formData:{
          ber_id : this.$store.getters.getInfo.ber_id,
          or_kind:'',
          or_type:'',
          or_accept:'',
          or_product:'',
          or_pay : ''
        },
        serviceKind : dictionary.serviceKind,
        orderType : dictionary.orderStatus,
        acceptStatus : dictionary.acceptStatus
      }
    },
    methods: {
     handleSelect(path,name) {
       if(name =='BuyNotPay' )this.formData.or_pay = 0
       else if(name =='BuyPayed' )this.formData.or_pay = 1
       else this.formData.or_pay = ''
          this.$router.push({
          name:name,
          params: {
            formData : this.formData
          }
        })
      },
      onSubmit(){
       this.$refs.all.searchOrder(this.formData)
      }
    }
  }
</script>

<style scoped>
  .searchForm{
    width: 100%;
    /*height: 40px;*/
    background-color: #0f4984;
    padding-top: 20px;
    text-align: left;
  }
  .el-form-item{
    margin-left: 15px;
  }
  /deep/.el-form-item__label{
    color: #f5f2f2;
  }
</style>